<template>
  <div class="card h-100">
    <div class="card-header pb-0 p-3">
      <div class="row">
        <div class="col-6 d-flex align-items-center">
          <h6 class="mb-0">投标总览</h6>
        </div>
      </div>
    </div>
    <div class="card-body p-3 pb-0 mb-0">
      <ul class="list-group">
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
          v-for="(item, index) in form"
          :key="index"
        >
          <div class="d-flex flex-column">
            <h6 class="mb-1 text-dark font-weight-bold text-sm">
              {{ item.dingdan }}
            </h6>
            <span class="text-xs">{{ item.gongchang }}</span>
          </div>
          <div class="d-flex align-items-center text-sm">{{ item.price }}</div>
          <div class="d-flex align-items-center text-sm">{{ item.status }}</div>
          <el-button
           type='success'
            @click="chooseBid(item.dingdan)"
            v-if="item.status === '未中标'"
            > 中标</el-button
          >
          <el-button
            type='info'
            v-if="item.status === '已中标'"
            disabled
            >已中</el-button
          >
          <vsud-button color="fail" size="sm" variant="outline" @click="set(item.gongchang)"
            >删除</vsud-button
          >
        </li>
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
        >
          <el-pagination layout="prev, pager, next" :total="50" />
        </li>
      </ul>
    </div>
  </div>
  <el-dialog v-model="deleteVisible" title="警告" width="30%">
    <span>确认删除该订单？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="remove(editing)">确定</el-button>
        <el-button @click="deleteVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import VsudButton from "@/components/VsudButton.vue";
import { ElMessageBox } from "element-plus";
// import { Action } from 'element-plus'
export default {
  name: "chooseBidCard",
  components: {
    VsudButton,
  },
  data() {
    return {
      editing:"",
      editVisible: false,
      addVisible: false,
      deleteVisible: false,
      form: [
        {
          dingdan: "001订单",
          gongchang: "投标工厂编号：0111",
          price: "$1400",
          status: "未中标",
        },
        {
          dingdan: "002订单",
          gongchang: "投标工厂编号：0112",
          price: "$1000",
          status: "未中标",
        },
        {
          dingdan: "003订单",
          gongchang: "投标工厂编号：0113",
          price: "$9000",
          status: "未中标",
        },
        {
          dingdan: "004订单",
          gongchang: "投标工厂编号：0114",
          price: "$4000",
          status: "已中标",
        },
        {
          dingdan: "005订单",
          gongchang: "投标工厂编号：0121",
          price: "$1000",
          status: "未中标",
        },
        {
          dingdan: "006订单",
          gongchang: "投标工厂编号：0122",
          price: "$4000",
          status: "已中标",
        },
        {
          dingdan: "007订单",
          gongchang: "投标工厂编号：0123",
          price: "$6000",
          status: "未中标",
        },
        {
          dingdan: "008订单",
          gongchang: "投标工厂编号：0131",
          price: "$2500",
          status: "已中标",
        },
      ],
    };
  },
  methods: {
    chooseBid(dingdan) {
      this.form.forEach((val) => {
        if (val.dingdan === dingdan) val.status = "已中标";
      });
      ElMessageBox.alert("已中标！", "恭喜", {
        confirmButtonText: "OK",
      });
    },
    set(number) {
      this.editing=number;
        this.deleteVisible = true;
    },
    remove(number) {
      console.log(number);
      this.form = this.form.filter((item) => item.gongchang != number);
      this.deleteVisible = false;
    },
    
  },
};
</script>
